<template>
	<div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div style="position: fixed;padding-top: 15px;padding-left: 10px;z-index: 999;" @click="$router.back(-1)">
					<van-icon name="arrow-left" size="20"/>
				</div>
				<div v-if="show" style="padding-top: 10px;">
					<van-tabs type="card" @change="getTab">
						<van-tab :title="$t('ToChange.v1')">
							<div align="center" style="padding: 10px 0px;color: #D44935;">{{$t('ToChange.v2')}}</div>
							<div align="center">
								<img :src="imgUrl" style="width:38%;margin-top: 20px;" alt="">
							</div>
							<div>
								<div id="copyText" v-text="inviteCode" style="color: transparent;background-color: transparent;position: absolute;z-index: 0;-webkit-user-select: text;word-wrap: break-word;width: 80%;"></div>
							</div>
							<div align="left" style="color: #8690AB;">
								<div class="site" style="padding-top:20px;">
									<span>
										<p v-text="inviteCode" style="word-wrap:break-word;padding: 0px 10px;font-size: 12px;"></p>
									</span>
								</div>
							</div>
							<div class="btn">
								<van-button slot="button" size="normal" type="info" @click.native="copyLink">{{$t('ToChange.v3')}}</van-button>
							</div>
							<div class="hint">
								<div class="tit">{{$t('ToChange.v4')}}</div>
								<p>{{$t('ToChange.v5')}}(<span style="color: rgb(212, 73, 53);">ERC20</span>) {{$t('ToChange.v6')}}。</p>
								<p>{{$t('ToChange.v7')}}。</p>
								<p>{{$t('ToChange.v8')}}。</p>
							</div>
						</van-tab>
						<van-tab :title="$t('ToChange.v17')">
							<div align="center" style="padding: 10px 0px;color: #D44935;">{{$t('ToChange.v9')}}</div>
							<div align="center">
								<img :src="imgUrl" style="width:38%;margin-top: 20px;" alt="">
							</div>
							<div>
								<div id="copyText2" v-text="inviteCode" style="color: transparent;background-color: transparent;position: absolute;z-index: 0;-webkit-user-select: text;word-wrap: break-word;width: 80%;"></div>
							</div>
							<div align="left" style="color: #8690AB;">
								<div class="site" style="padding-top:20px;">
									<span>
										<p v-text="inviteCode" style="word-wrap:break-word;padding: 0px 10px;font-size: 12px;"></p>
									</span>
								</div>
							</div>
							<div class="btn">
								<van-button slot="button" size="normal" type="info" @click.native="copyLink2">{{$t('ToChange.v3')}}</van-button>
							</div>
							<div class="hint">
								<div class="tit">{{$t('ToChange.v4')}}</div>
								<p>{{$t('ToChange.v10')}}(<span style="color: rgb(212, 73, 53);">ERC20</span>) {{$t('ToChange.v11')}}。</p>
								<p>{{$t('ToChange.v12')}}。</p>
								<p>{{$t('ToChange.v13')}}。</p>
							</div>
						</van-tab>
					</van-tabs>
				</div>

				<div v-if="!show" style="text-align: center;color: #888888;padding-top: 40%;font-size: 15px;" align="center">
					<img src="../assets/images/addressError.png" style="width: 40%;height: 40%;padding-left: 10%;"/>
					<div style="padding-top: 20px; color:#fff;">{{$t('ToChange.v14')}}...</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	let _this;
	export default {
		name: 'Invite',
		data() {
			return {
				imgUrl: '',
				inviteCode: '',
				msg: '',
				show: true,
				checked:false,
				k: '', // 凭证K值
				v: '', // 凭证V值
				index: 1
			}
		},
		beforeCreate() {
			_this = this;
		},
		created() {

		},
		mounted() {
			this.getSharing();
		},
		methods: {
			getTab(index) {
				if(index == 0){
					this.index = 1;
				}else if(index == 1) {
					this.index = 2;
				}
				this.getSharing();
			},
			getSharing() { // EMP是1   USDT是2
				this.axios.get(process.env.API_HOST + 'user/transfer/into/' + this.index).then(res => {
					if(res.data.code == 200) {
						this.show = true;
						this.inviteCode = res.data.data.address;
						this.imgUrl = res.data.data.qrContent;
						this.checked = res.data.data.autoCutIn;
					}else if(res.data.code == 500){
						this.show = false;
						this.msg = res.data.msg;
					}
				})
			},
			copyLink() { //复制邀请链接
				let sUserAgent = navigator.userAgent.toLowerCase();
				let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
				let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
				window.getSelection().removeAllRanges();
				if(bIsIpad || bIsIphoneOs) {
					var copyDOM = document.querySelector('#copyText'); //要复制文字的节点
					var range = document.createRange();
					// 选中需要复制的节点
					range.selectNode(copyDOM);
					// 执行选中元素
					window.getSelection().addRange(range);
					// 执行 copy 操作
					var successful = document.execCommand('copy');
					try {
						var msg = successful ? 'successful' : 'unsuccessful';
						_this.$vux.toast.text(_this.$t('ToChange.v15'), 'middle');
					} catch(err) {
						_this.$vux.toast.text(_this.$t('ToChange.v16'), 'middle');
					}
					// 移除选中的元素
					window.getSelection().removeAllRanges();
				} else {
					const Url2 = document.getElementById("copyText").innerText;
					const oInput = document.createElement('input');
					oInput.value = Url2;
					document.body.appendChild(oInput);
					oInput.select(); // 选择对象
					document.execCommand("Copy"); // 执行浏览器复制命令
					oInput.className = 'oInput';
					oInput.style.display = 'none';
					_this.$vux.toast.text(_this.$t('ToChange.v15'), 'middle');
				}
			},
			copyLink2() { //复制邀请链接
				let sUserAgent = navigator.userAgent.toLowerCase();
				let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
				let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
				window.getSelection().removeAllRanges();
				if(bIsIpad || bIsIphoneOs) {
					var copyDOM = document.querySelector('#copyText2'); //要复制文字的节点
					var range = document.createRange();
					// 选中需要复制的节点
					range.selectNode(copyDOM);
					// 执行选中元素
					window.getSelection().addRange(range);
					// 执行 copy 操作
					var successful = document.execCommand('copy');
					try {
						var msg = successful ? 'successful' : 'unsuccessful';
						_this.$vux.toast.text(_this.$t('ToChange.v15'), 'middle');
					} catch(err) {
						_this.$vux.toast.text(_this.$t('ToChange.v16'), 'middle');
					}
					// 移除选中的元素
					window.getSelection().removeAllRanges();
				} else {
					const Url2 = document.getElementById("copyText2").innerText;
					const oInput = document.createElement('input');
					oInput.value = Url2;
					document.body.appendChild(oInput);
					oInput.select(); // 选择对象
					document.execCommand("Copy"); // 执行浏览器复制命令
					oInput.className = 'oInput';
					oInput.style.display = 'none';
					_this.$vux.toast.text(_this.$t('ToChange.v15'), 'middle');
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.head~.overlay {
		top: 45px;
	}

	.head .return:after {
		border-color: #FFFFFF;
	}

	.btn {
		padding: 30px 20px;
	}
	.hint{
		.tit{
			font-size: 14px;
			padding-bottom:10px;
		}
		p{
			font-size: 12px;
			color:#9a9fb1;
		}
	}
	.site{
		text-align: center;
		color:#9a9fb1;
	}
	/deep/.van-checkbox__label{
		color:#fff !important;
		font-size: 12px;
	}
	/deep/.van-checkbox__icon .van-icon{
		width: 20px;
		height: 20px;
		font-size: 14px;
	}

	/deep/ .van-tab {
		line-height: 30px;
	}

	/deep/ .van-tabs__nav--card {
		margin: 0px 60px;
		border: 0;
	}

	/deep/ .van-tabs__nav--card .van-tab.van-tab--active {
		color: white;
		background-color: rgb(77, 89, 126);
	}

	/deep/ .van-tabs__nav {
		background-color: rgb(33, 38, 57);
	}

	/deep/ .van-tabs__nav--card .van-tab {
		color: rgb(133, 141, 172);
		border-right: 0;
	}

	.return {
		z-index: 100999!important;
	}
</style>
